<template>
    <div class="ryjx">
        <div class="title"></div>
        <div class="cnt">
            <div class="scroll-box">
                <div class="shadow"></div>
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item, index) in lastRes" :key="'swiper' + index">
                            <starInfo v-for="(it, i) in item" :key="'it'+i" :info="it"></starInfo>
<!--                            <starInfo></starInfo>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Swiper from'swiper';
import starInfo from './starInfo.vue';
export default {
    name: "ryjx",
    components: {
        starInfo
    },
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        lastRes(){
            let len = 2;
            let res = [];
            this.list.forEach((item, index) => {
                if(index % 2 == 0){
                    res.push([])
                }
                res[Math.floor(index / 2)].push(item)
            })
            console.log(res)
            return res
        }
    },
    data() {
        return {
            swiper: null,
        }
    },
    mounted() {
        // 初始化 Swiper
        this.initSwiper();
    },
    methods: {
        initSwiper(){
            this.swiper = new Swiper('.swiper', {
                autoplay: false,
                slidesPerView: 2,
                loop: true,
                observer: true,
                observeParents: true,
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.ryjx{
    .title{
        width: 450px;
        height: 48px;
        background: url("~@/assets/home/right2.png") no-repeat;
        background-size: 100% 100%;
    }
    .cnt{
        position: relative;
        width: 435px;
        margin-top: 24px;
        padding-left: 45px;
        overflow: hidden;
        margin-bottom: 27px;
    }
    .scroll-box{
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    .shadow{
        position: absolute;
        top: 0;
        right: -5px;
        width: 100%;
        height: 100%;
        z-index: 2;
        pointer-events: none;
        box-shadow: inset -100px 0px 40px -40px rgba(15, 25, 46, 0.92);
    }
    .swiper{
        width: 444px;
        //padding-bottom: 11px;
        .swiper-slide{
            width: 222px!important;
            padding-right: 16px;
            .star-info + .star-info{
                margin-top: 16px;
            }
        }
    }
}
</style>